<template>
    <div class="print_page_container">
        <el-dialog class="print_dialog" :title="printOption.title" :visible.sync="printOption.visible"
                   :width="printOption.width" :append-to-body="printOption.appendToBody"
                   v-dialogDrag="dialogDrag" :class="{above_dialog: dialogDrag && print}">
            <div class="print_dialog_content">
                <div ref="print_area" id="print_area">
                    <slot :size="printSize" />
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-select v-model="printSize" style="margin-right: 10px;width: 120px;" v-if="direction && print">
                    <el-option label="纵向打印" value="portrait"></el-option>
                    <el-option label="横向打印" value="landscape"></el-option>
                </el-select>
                <el-button @click="handleClosePrint">取 消</el-button>
                <el-button type="primary" @click="handlePrinting()" v-if="print">打印</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择打印机" :visible.sync="chooseOption.visible"
                   :append-to-body="true" width="500px" v-dialogDrag>
            <div class="dialog_content">
                <el-form ref="form" label-width="100px">
                    <el-form-item label="选择打印机" style="margin-bottom: 0;">
                        <el-select v-model="chooseOption.printer" style="width: 95%;">
                            <el-option v-for="(item, index) in chooseOption.Printers" :key="index" :label="item"
                                       :value="item" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <a target="_blank" href="/printerSetup.exe" style="float:left">下载打印驱动</a>
                <el-button @click="chooseOption.visible = false">取 消</el-button>
                <el-button type="primary" @click="handleConfirmPrint">确认打印</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getGSCloudPlugin } from '@common/components/common/GSCloudPluginFuncs';
import print from '@common/utils/print';
import { BASE64 } from '@common/utils/crypto';

export default {
    name: "PrintPage",
    props: {
        option: {
            type: Object,
            default() {
                return {};
            },
        },
        direction: {
            type: Boolean,
            default: true,
        },
        print: {
            type: Boolean,
            default: true,
        },
        dialogDrag: {
            type: Boolean,
            default: false,
        },
        withStyle: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            printSize: 'portrait',
            defaultOption: {
                visible: false,
                width: '800px',
                title: '打印',
                printOpt: {
                    // 打印布局：portrait-纵向、landscape-横向
                    printSize: 'portrait',
                },
                file: {},
            },
            printOption: {},
            a4Size: {},
            GSCloudPlugin: undefined,
            chooseOption: {
                visible: false,
                printer: '',
                Printers: [],
            },
            printPerfix: '/#/print?html=',
        };
    },
    computed: {
        printStyle() {
            let width = this.a4Size.width;
            if (this.printSize === 'landscape') {
                width = this.a4Size.height;
            }
            return {
                width: `${ width }px`,
            };
        },
    },
    watch: {
        option: {
            handler() {
                this.initData();
            },
            deep: true,
            immediate: true,
        },
    },
    created() {
        this.GSCloudPlugin = getGSCloudPlugin();
        if (this.GSCloudPlugin) {
            this.chooseOption = $.extend({}, this.chooseOption, {
                Printers: this.GSCloudPlugin.Printers,
                printer: this.GSCloudPlugin.Printers[0],
            });
        }
        this.a4Size = this.$utils.getA4Size();
    },
    methods: {
        initData() {
            this.printSize = 'portrait';
            this.printOption = $.extend({}, this.defaultOption, this.option);
            if (this.$slots.default) {
                let defaultSlot = this.$slots.default[0];
                if (defaultSlot && defaultSlot.componentOptions) {
                    let propsData = defaultSlot.componentOptions.propsData;
                    if (propsData.size) {
                        this.printOption = $.extend({}, this.printOption, {
                            printOpt: {
                                printSize: propsData.size,
                            },
                        });
                    }
                }
            }
        },
        handlePrinting() {
            this.chooseOption = $.extend({}, this.chooseOption, {
                visible: true,
            });
        },
        handleConfirmPrint() {
            let _this = this;
            if (_this.withStyle) {
                _this.getPrintStyle().then(initStyle => {
                    _this.handlePrintMethod(initStyle);
                });
            } else {
                _this.handlePrintMethod();
            }
        },
        handlePrintMethod(initStyle) {
            let _this = this;
            _this.GSCloudPlugin.PrinterName = _this.chooseOption.printer;
            _this.chooseOption = $.extend({}, _this.chooseOption, {
                visible: false,
            });
            let printOpt = $.extend({}, _this.printOption.printOpt, {
                printSize: this.printSize,
            });
            let _print = _this.$print(_this.$refs.print_area, printOpt, false);
            let fileName = `${ new Date().getTime() }.html`;
            let html = _print.getContentWithInit(initStyle);
            if (_this.$utils.isNotEmpty(initStyle)) {
                html += initStyle;
            }
            html = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title></title></head><body style="margin: 0;padding: 0;">${ html }</body></html>`
            print.printHtml4Url(this.GSCloudPlugin, BASE64.en(html), fileName, _this.printSize).then(result => {
                _this.$emit('handlePrint', result);
            }).catch(err => {
                if (err.Code === 201) {
                    _this.$message.info(err.Message);
                } else {
                    if (_this.$utils.isNotEmpty(err.Message)) {
                        _this.$message.error(err.Message);
                    }
                }
            });
        },
        handleClosePrint() {
            this.printOption = $.extend({}, this.printOption, {
                visible: false
            });
            this.$emit('close');
        },
    },
}
</script>

<style scoped>
/* 去除页眉页脚 */
@page {
    padding: 0;
    margin: 0;
}

/* 增加padding */
#print_area {
    background: #fff;
    box-sizing: border-box;
    font-family: '宋体', serif;
}

.print_dialog >>> .print_dialog_content {
    width: 100%;
    height: 100%;
    overflow: auto;
}
</style>
